<template>
	<Modal v-model="modal" @on-ok="ok('form')" @on-cancel="cancel('form')" :loading="loading">
		<IForm :model="form" ref="form" :label-width="100" :rules="formRule" >
			<IInput v-model="form.id" class="hide" />
	        <FormItem prop="name" label="权限路径">
	            <IInput v-model="form.name" size="large" placeholder="权限,模块权限请去除admin/前缀" />
	        </FormItem>
	        <FormItem prop="displayName" label="权限中文名称">
	            <IInput v-model="form.displayName" size="large" placeholder="权限中文名称" />
	        </FormItem>
	        <FormItem prop="description" label="描述">
	            <IInput v-model="form.description"  type="textarea" :autosize="{minRows: 5,maxRows: 10}" size="large" placeholder="权限描述" />
	        </FormItem>
	    </IForm>
	</Modal>
</template>
<script>
	import Modal from 'iview/src/components/modal';
    import Form from 'iview/src/components/form';
    import Input from 'iview/src/components/input';
    import Button from 'iview/src/components/button';

    import Axios from 'admin/config/axios';
	export default {
		components:{
            Modal,
            'IInput' : Input,
			'IForm' : Form,
			'FormItem' : Form.Item,
			'IButton' : Button,
        },
        data () {
        	const validateName=(rule , value ,callback)=>{
				if(value.indexOf('admin')==0 || value.indexOf('#')>=0){
					callback(new Error('请去除admin/#/前缀'));
				}
	            var pathArr = value.split('/');
	            if(pathArr[0]==''){
	                callback(new Error('请填写格式正确的路径'));
	            }
	            var reg = /^[A-Za-z]+$/;
	            for(var i in pathArr){
	                if(!reg.test(pathArr[i])){
	                    callback(new Error('请填写合法路径名'));
	                }
	            }
	            Axios.Configs.Permission.CheckName({name:value,id:this.form.id})
	            .then(res =>{
	            	if(!res){
	            		callback();
	            		return false;
	            	}
	                callback();
	            })
	        };
	        const validateDisplayName=(rule , value ,callback)=>{
	            var reg = /^[\u4E00-\u9FA5\-]+$/;
	            if(!reg.test(value)){
	                callback(new Error('请填写中文名,只能填写-特殊符号'));
	            }
	            callback();
	        };
            return {
                modal: false,
                loading : true,
                form :{
                	id : 0,
                	name : '',
                	displayName  : '',
                	description  : '',
                },
                formRule : {
	                name: [
	                    { required: true, message: '请填写权限路径', trigger: 'blur' },
	                    { validator: validateName, trigger: 'blur'}
	                ],
	                displayName: [
	                    { required: true, message: '请填写权限中文名,多模块以-分开', trigger: 'blur' },
	                    { validator: validateDisplayName, trigger: 'blur'}
	                ]
	            },
            }
        },
        methods: {
        	init(){
        		this.form.id = 0;
        		this.form.name = '';
        		this.form.displayName = '';
        		this.form.description = '';
        	},
            changeLoading(){
	            this.loading = false;
	            this.$nextTick(() => {
	              this.loading = true;
	            });
	        },
        	ok(name){
        		this.$refs[name].validate(valid => {
        			if (!valid) {this.changeLoading();return false;}
        			Axios.Configs.Permission.Update(this.form)
		            .then(res =>{
		            	this.changeLoading();
		            	if(!res) return false;
		                this.modal = false;
		                this.$refs[name].resetFields();
		                this.init();
		                this.$emit('resetTable');
		            })
		            .catch(error =>{
		                this.$Message.error(error);
		            })
        		})
        	},
        	cancel(name){
        		this.$refs[name].resetFields();
        		this.init();
        	}
        },
    }
</script>